<script setup>
import { defineProps, defineEmits } from 'vue'
import { ZODIAC_CLR_MAP, NUMBER_CLR_MAP } from '../lhc-constant'

const emit = defineEmits(['selectOdds'])
const props = defineProps(['data', 'showZodiac'])

const setZodiacClrHandler = (item) => {
  return NUMBER_CLR_MAP[item]
}
const clickHandler = () => {
  emit('selectOdds')
}
</script>

<template>
  <div class="container" @click="clickHandler" :class="data['color']">
    <span class="number">{{ props.data.number || props.data.playName }}</span>
    <span class="odds">{{ props.data.odds }}</span>
    <span
      style="display: none"
      class="zodiac-number"
      :class="setZodiacClrHandler(item)"
      v-for="(item, index) in ZODIAC_CLR_MAP[data['playCode']]"
      :key="index"
    >
      {{ item }}
    </span>
  </div>
</template>

<style scoped lang="less">
.container.text {
  height: 32px;
  width: 66px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 6px;
  background: linear-gradient(180deg, #333950 0%, #24253d 100%);
  color: #7b85a6;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;

  &:nth-child(4n) {
    margin-right: 0;
  }
  .number {
    height: 18px;
    line-height: 18px;
  }
  .odds {
    height: 14px;
    line-height: 14px;
    font-size: 11px;
  }
  &.selected {
    background: linear-gradient(354.48deg, #3d35c6 4.34%, #6c4fe0 95.73%);
    &.red {
      background: linear-gradient(180deg, #ef434d 0%, #aa1f30 100%);
    }
    &.blue {
      background: linear-gradient(180deg, #38acff 0%, #0169d9 100%);
    }
    &.green {
      background: linear-gradient(180deg, #40ce3d 0%, #269753 100%);
    }
    .number {
      color: #fff !important;
    }
    .odds {
      color: #fff;
    }
  }
  &.red .number {
    color: #9e4b4b;
  }
  &.green .number {
    color: #4b9e67;
  }
  &.blue .number {
    color: #4b679e;
  }
}
.container.circle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-right: 6px;
  margin-top: 6px;
  box-sizing: border-box;
  line-height: 40px;
  .number {
    font-size: 16px;
    font-weight: 600;
    line-height: 38px;
  }
  &.red {
    border: 1px solid rgb(224, 113, 117);
    .number {
      color: rgb(224, 113, 117);
    }
    &.selected {
      background-image: url('@/assets/img/bet/round_red.png');
    }
  }
  &.blue {
    border: 1px solid rgb(123, 163, 241);
    .number {
      color: rgb(123, 163, 241);
    }
    &.selected {
      background-image: url('@/assets/img/bet/round_blue.png');
    }
  }
  &.green {
    border: 1px solid rgb(83, 201, 165);
    .number {
      color: rgb(83, 201, 165);
    }
    &.selected {
      background-image: url('@/assets/img/bet/round_green.png');
    }
  }
  &.selected {
    background-size: 100% 100%;
    border: unset;
    .number {
      color: #fff;
    }
  }
  .odds {
    display: none;
  }
}
.container.zodiac {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  .number {
    display: block;
    height: 32px;
    line-height: 18px;
    width: 66px;
    border-radius: 5px;
    background: linear-gradient(180deg, #333950 0%, #24253d 100%);
    color: #8a9bd7;
    flex-direction: column;
    font-size: 14px;
    font-weight: 500;
  }
  .odds {
    width: 66px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    color: #777887;
  }
  .zodiac-number {
    display: inline-block !important;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 35px;
    font-size: 0.32rem;
    font-weight: 600;
  }
  .colorStyles(@borderColor, @textColor) {
    border: 1px solid @borderColor;
    color: @textColor;
  }

  .red {
    .colorStyles(rgb(224, 113, 117), rgb(224, 113, 117));
  }

  .blue {
    .colorStyles(rgb(123, 163, 241), rgb(123, 163, 241));
  }

  .green {
    .colorStyles(rgb(83, 201, 165), rgb(83, 201, 165));
  }

  &.selected {
    .number {
      background: linear-gradient(354.48deg, #3d35c6 4.34%, #6c4fe0 95.73%);
      color: #fff;
    }
    .odds {
      color: #fff;
    }
    .zodiac-number {
      color: #fff;
      border: unset;
    }

    .roundBackgroundMixin(@color) {
      background: url('@/assets/img/bet/round_@{color}.png') no-repeat;
      background-size: cover;
    }

    .red {
      .roundBackgroundMixin(red);
    }

    .blue {
      .roundBackgroundMixin(blue);
    }

    .green {
      .roundBackgroundMixin(green);
    }
  }
}
</style>
